<template>
  <div class="car-traffic">
    <transition name="left">
      <car-left class='panel-left'
                v-if="panelShow"></car-left>
    </transition>
    <div class='panel-right'>
      <widget></widget>
    </div>
  </div>
</template>
<script>
import CarLeft from '../components/car/car-left.vue'
import CarRight from '../components/car/car-right.vue'
import Bus from "../components/utils/bus.js"
import Widget from "../components/widget/widget.vue"
export default {
  name: 'car-traffic',
  data () {
    return {
      panelShow: true,
      moveToRight: false,
      backToleft: true,
      moveToLeft: false,
      backToRight: true,
    }
  },
  components: {
    CarLeft,
    CarRight,
    Widget
  },
  mounted () {
    Bus.$on("toggle", () => {
      this.panelShow = !this.panelShow;
      this.moveToRight = !this.moveToRight;
      this.backToleft = !this.backToleft;
      this.moveToLeft = !this.moveToLeft;
      this.backToRight = !this.backToRight;
    });
  }

}
</script>
<style lang="scss" >
$precent: 100vw / 1920;
@keyframes left {
  100% {
    transform: translateX(-500 * $precent);
  }
}
@keyframes right {
  100% {
    transform: translateX(500 * $precent);
  }
}
@keyframes backLeft {
  0% {
    transform: translateX(-500 * $precent);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes backRight {
  0% {
    transform: translateX(500 * $precent);
  }
  100% {
    transform: translateX(0);
  }
}
// 向右下角移动
.moveToRight {
  top: 710 * $precent;
  right: -9 * $precent;
  transition: 1s;
}
.backToleft {
  top: 625 * $precent;
  right: 465 * $precent;
  transition: 1s;
}
// 向左下角移动
.moveToLeft {
  bottom: 20 * $precent;
  left: 10 * $precent;
  transition: 1s;
}
.backToRight {
  bottom: 105 * $precent;
  left: 490 * $precent;
  transition: 1s;
}
.left-enter-active {
  transition: opacity 0.5s;
  animation: backLeft 1s;
}
.left-enter {
  opacity: 0;
}
.left-leave-active {
  transition: opacity 0.5s;
  animation: left 1s;
}

.right-enter-active {
  transition: opacity 0.5s;
  animation: backRight 1s;
}
.right-enter {
  opacity: 0;
}
.right-leave-active {
  transition: opacity 0.5s;
  animation: right 1s;
}
.car-traffic {
  .panel-left {
    position: fixed;
    top: 66 * $precent;
    left: 0;
    z-index: 10;
  }
  .panel-right {
    position: fixed;
    right: 20 * $precent;
    bottom: 20 * $precent;
    right: 0;
  }
}
</style>
